<template>
  <div>
    <MessageInputNew>
      <!-- 开始组件标签到结束组件标签之间的内容，默认是传递给默认默认插槽的。 -->
      <template #default="obj">
        <span>
          {{ obj.tip }}
        </span>
      </template>
      <!-- 给具名插槽传内容 -->
      <template v-slot:inputSlot="slotProps">
        <el-input v-model="slotProps.text"></el-input>
      </template>

      <!-- v-slot, 简写： #插槽名 -->
      <template #btnSlot="mySlotProps">
        <el-button type="danger" icon="el-icon-message" @click="mySlotProps.sendMessage">SEND</el-button>
      </template>
    </MessageInputNew>
  </div>
</template>
<!--    -->
<script>
import MessageInputNew from './components/msg/MessageInputNew.vue';
export default {
  name: 'App',
  data() {
    return {
      btnName: '编辑',
      text: ''
    };
  },
  components: {
    MessageInputNew
  },
  methods: {

  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 20px;
}

body {
  height: 100%;
  font-size: 16px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

.text-right {
  text-align: right;
}
</style>
